﻿
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>CloudBOX | 网上云盘</title>
      <link rel="shortcut icon" href="assets/images/logo_ico.png" type="img/png"/>
      <link rel="stylesheet" href="assets/css/backend.min.css">
      <link rel="stylesheet" href="assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
      <link rel="stylesheet" href="assets/vendor/line-awesome/dist/line-awesome/css/line-awesome.min.css">
      <link rel="stylesheet" href="assets/vendor/remixicon/fonts/remixicon.css">
      <link rel="stylesheet" href="assets/vendor/doc-viewer/include/pdf/pdf.viewer.css">
      <link rel="stylesheet" href="assets/vendor/doc-viewer/include/PPTXjs/css/pptxjs.css">
      <link rel="stylesheet" href="assets/vendor/doc-viewer/include/PPTXjs/css/nv.d3.min.css">
      <link rel="stylesheet" href="assets/vendor/doc-viewer/include/SheetJS/handsontable.full.min.css">
      <link rel="stylesheet" href="assets/vendor/doc-viewer/include/verySimpleImageViewer/css/jquery.verySimpleImageViewer.css">
      <link rel="stylesheet" href="assets/vendor/doc-viewer/include/officeToHtml/officeToHtml.css">
      <link rel="stylesheet" href="assets/vendor/notice/css/bs4.pop.css">
  </head>
  <body class="  ">
    <!-- 加载动画开始 -->
    <div id="loading">
          <div id="loading-center">
          </div>
    </div>
    <!-- 加载动画结束 -->

    <div class="wrapper">

        <!-- 左侧导航栏开始 -->
      <div class="iq-sidebar  sidebar-default ">
          <div class="iq-sidebar-logo d-flex align-items-center justify-content-between">
              <a href="page-index.html" class="header-logo">
                  <img src="assets/images/logo.png" class="img-fluid rounded-normal light-logo" alt="logo">
                  <img src="assets/images/logo-white.png" class="img-fluid rounded-normal darkmode-logo" alt="logo">
              </a>
              <div class="iq-menu-bt-sidebar">
                  <i class="las la-bars wrapper-menu"></i>
              </div>
          </div>
          <div class="data-scrollbar" data-scroll="1">
              <div class="new-create select-dropdown input-prepend input-append">
                  <div class="btn-group">
                      <label data-toggle="dropdown">
                      <div class="search-query selet-caption"><i class="las la-plus pr-2"></i>操 作</div><span class="search-replace"></span>
                      <span class="caret"> </span>
                      </label>
                      <ul class="dropdown-menu">
                          <a href="upload-picture.html"><li><div class="item"><i class="ri-file-upload-line pr-3"></i>上传图片</div></li></a>
                          <a href="upload-document.html"><li><div class="item"><i class="ri-file-upload-line pr-3"></i>上传文档</div></li></a>
                          <a href="upload-audio.html"><li><div class="item"><i class="ri-file-upload-line pr-3"></i>上传音频</div></li></a>
                          <a href="upload-video.html"><li><div class="item"><i class="ri-file-upload-line pr-3"></i>上传视频</div></li></a>
                      </ul>
                  </div>
              </div>
              <nav class="iq-sidebar-menu">
                  <ul id="iq-sidebar-toggle" class="iq-menu">
                       <li class="active">
                              <a href="page-index.html" class="">
                                  <i class="las la-home iq-arrow-left"></i><span>主页</span>
                              </a>
                          <ul id="dashboard" class="iq-submenu collapse" data-parent="#iq-sidebar-toggle">
                          </ul>
                       </li>
                       <li class=" ">
                          <a href="#mydrive" class="collapsed" data-toggle="collapse" aria-expanded="false">
                              <i class="las la-hdd"></i><span>空间</span>
                              <i class="las la-angle-right iq-arrow-right arrow-active"></i>
                              <i class="las la-angle-down iq-arrow-right arrow-hover"></i>
                          </a>
                          <ul id="mydrive" class="iq-submenu collapse" data-parent="#iq-sidebar-toggle">
                                  <li class=" ">
                                          <a href="page-picture.html">
                                              <i class="lab la-blogger-b"></i><span>图片</span>
                                          </a>
                                  </li>
                                  <li class=" ">
                                          <a href="page-document.html">
                                              <i class="las la-share-alt"></i><span>文档</span>
                                          </a>
                                  </li>
                                  <li class=" ">
                                          <a href="page-audio.html">
                                              <i class="las la-icons"></i><span>音频</span>
                                          </a>
                                  </li>
                                  <li class=" ">
                                          <a href="page-video.html">
                                              <i class="las la-icons"></i><span>视频</span>
                                          </a>
                                  </li>
                          </ul>
                       </li>
                       <li class=" ">
                              <a href="page-message.html" class="">
                                  <i class="lar la-file-alt iq-arrow-left"></i><span>发现</span>
                              </a>
                          <ul id="page-files" class="iq-submenu collapse" data-parent="#iq-sidebar-toggle">
                          </ul>
                       </li>
                       <li class=" ">
                              <a href="page-record.html" class="">
                                  <i class="las la-stopwatch iq-arrow-left"></i><span>最近</span>
                              </a>
                          <ul id="page-folders" class="iq-submenu collapse" data-parent="#iq-sidebar-toggle">
                          </ul>
                       </li>
                       <li class=" ">
                              <a href="page-collection.html" class="">
                                  <i class="lar la-star"></i><span>收藏</span>
                              </a>
                          <ul id="page-fevourite" class="iq-submenu collapse" data-parent="#iq-sidebar-toggle">
                          </ul>
                       </li>
                       <li class=" ">
                              <a href="page-trash.html" class="">
                                  <i class="las la-trash-alt iq-arrow-left"></i><span>回收</span>
                              </a>
                          <ul id="page-delete" class="iq-submenu collapse" data-parent="#iq-sidebar-toggle">
                          </ul>
                       </li>
                       <li class=" ">
                          <a href="page-user.html">
                              <i class="las la-user-cog iq-arrow-left"></i><span>我的</span>
                          </a>
                       </li>
                  </ul>
              </nav>

              <div class="p-3" id="space"></div>
          </div>
          </div>
        <!-- 左侧导航栏结束 -->


        <!-- 顶部导航栏开始 -->
        <div class="iq-top-navbar">
          <div class="iq-navbar-custom">
              <nav class="navbar navbar-expand-lg navbar-light p-0">
              <div class="iq-navbar-logo d-flex align-items-center justify-content-between">
                  <i class="ri-menu-line wrapper-menu"></i>
                  <a href="page-index.html" class="header-logo">
                      <img src="assets/images/logo.png" class="img-fluid rounded-normal light-logo" alt="logo">
                      <img src="assets/images/logo-white.png" class="img-fluid rounded-normal darkmode-logo" alt="logo">
                  </a>
              </div>

                  <!-- 搜索开始 -->
                  <div class="iq-search-bar device-search">
                      <form>
                          <div class="input-prepend input-append">
                              <div class="btn-group">
                                  <label class="dropdown-toggle searchbox" data-toggle="dropdown">
                                  <input class="dropdown-toggle search-query text search-input" readonly type="text"  placeholder="搜索"><span class="search-replace"></span>
                                  <a class="search-link"><i class="ri-search-line"></i></a>
                                  <span class="caret"></span>
                                  </label>
                                  <ul class="dropdown-menu">
                                      <li><a href="page-document.html?documentType=pdf"><div class="item"><i class="far fa-file-pdf bg-info"></i>PDF</div></a></li>
                                      <li><a href="page-document.html?documentType=doc"><div class="item"><i class="far fa-file-alt bg-primary"></i>DOC</div></a></li>
                                      <li><a href="page-document.html?documentType=xls"><div class="item"><i class="far fa-file-excel bg-success"></i>XLS</div></a></li>
                                      <li><a href="page-document.html?documentType=ppt"><div class="item"><i class="far fa-file-powerpoint bg-danger"></i>PPT</div></a></li>
                                      <li><a href="page-picture.html"><div class="item"><i class="far fa-file-image bg-warning"></i>Image</div></a></li>
                                      <li><a href="page-video.html"><div class="item"><i class="far fa-file-video bg-info"></i>Video</div></a></li>
                                  </ul>
                              </div>
                          </div>
                      </form>
                  </div>
                  <!-- 搜索结束 -->

                  <!-- 个人中心开始 -->
                  <div class="d-flex align-items-center">
                      <div class="change-mode">
                          <div class="custom-control custom-switch custom-switch-icon custom-control-inline">
                              <div class="custom-switch-inner">
                                  <p class="mb-0"> </p>
                                  <input type="checkbox" class="custom-control-input" id="dark-mode" data-active="true">
                                  <label class="custom-control-label" for="dark-mode" data-mode="toggle">
                                      <span class="switch-icon-left"><i class="a-left"></i></span>
                                      <span class="switch-icon-right"><i class="a-right"></i></span>
                                  </label>
                              </div>
                          </div>
                      </div>
                      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"  aria-label="Toggle navigation">
                      <i class="ri-menu-3-line"></i>
                      </button>
                      <div class="collapse navbar-collapse" id="navbarSupportedContent">
                          <ul class="navbar-nav ml-auto navbar-list align-items-center">
                          <li class="nav-item nav-icon search-content">
                              <a href="#" class="search-toggle rounded" id="dropdownSearch" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                  <i class="ri-search-line"></i>
                              </a>
                              <div class="iq-search-bar iq-sub-dropdown dropdown-menu" aria-labelledby="dropdownSearch">
                                  <form action="#" class="searchbox p-2">
                                      <div class="form-group mb-0 position-relative">
                                      <input type="text" class="text search-input font-size-12" placeholder="type here to search...">
                                      <a href="#" class="search-link"><i class="las la-search"></i></a> 
                                      </div>
                                  </form>
                              </div>
                          </li>
                          <li class="nav-item nav-icon dropdown"> 
                              <a href="#" class="search-toggle dropdown-toggle" id="dropdownMenuButton02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
                              <i class="ri-settings-3-line"></i>
                              </a>
                              <div class="iq-sub-dropdown dropdown-menu" aria-labelledby="dropdownMenuButton02">
                                  <div class="card shadow-none m-0">
                                      <div class="card-body p-0 ">
                                          <div class="p-3">
                                              <a href="auth-lock-screen.html" class="iq-sub-card pt-0"><i class="ri-lock-2-line"></i>锁屏</a>
                                          </div>
                                          <div class="p-3">
                                              <a href="page-user.html" class="iq-sub-card pt-0"><i class="ri-user-3-line"></i>个人中心</a>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </li>
                          <li class="nav-item nav-icon dropdown caption-content">
                              <a href="#" class="search-toggle dropdown-toggle" id="dropdownMenuButton03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
                                  <div class="caption bg-primary line-height">
                                      <img id="head1" style="width: 28px" src="">
                                  </div>
                              </a>
                              <div class="iq-sub-dropdown dropdown-menu" aria-labelledby="dropdownMenuButton03">
                                  <div class="card mb-0">
                                      <div class="card-header d-flex justify-content-between align-items-center mb-0">
                                      <div class="header-title">
                                          <h4 class="card-title mb-0">欢迎使用</h4>
                                      </div>
                                      <div class="close-data text-right badge badge-primary cursor-pointer "><i class="ri-close-fill"></i></div>
                                      </div>
                                      <div class="card-body">
                                          <div class="profile-header">
                                              <div class="cover-container text-center">
                                                  <div class="rounded-circle profile-icon bg-primary mx-auto d-block">
                                                      <a href="page-user.html">
                                                        <img id="head2" style="width: 66px;" src="">
                                                      </a>
                                                  </div>
                                                  <div class="profile-detail mt-3">
                                                  <h5><a href="page-user.html" id="username"></a></h5>
                                                  </div>
                                                  <p></p>
                                                  <a href="javascript:void(0);" id="exit" class="btn btn-primary">退出登录</a>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </li>
                          </ul>                     
                      </div> 
                  </div>
                  <!-- 个人中心结束 -->
              </nav>
          </div>
      </div>
      <!-- 顶部导航栏结束 -->

        <!-- 正文开始 -->
      <div class="content-page">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card-transparent card-block card-stretch card-height mb-3">
                        <div class="d-flex justify-content-between">                             
                            <div class="select-dropdown input-prepend input-append">
                                <div class="btn-group">
                                    <label data-toggle="dropdown">
                                    <div class="dropdown-toggle search-query">我的空间<i class="las la-angle-down ml-3"></i></div><span class="search-replace"></span>
                                    <span class="caret"></span>
                                    </label>
                                    <ul class="dropdown-menu">
                                        <a href="upload-picture.html"><li><div class="item"><i class="ri-file-upload-line pr-3"></i>上传图片</div></li></a>
                                        <a href="upload-document.html"><li><div class="item"><i class="ri-file-upload-line pr-3"></i>上传文档</div></li></a>
                                        <a href="upload-audio.html"><li><div class="item"><i class="ri-file-upload-line pr-3"></i>上传音频</div></li></a>
                                        <a href="upload-video.html"><li><div class="item"><i class="ri-file-upload-line pr-3"></i>上传视频</div></li></a>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-8">
                    <div class="card card-block card-stretch card-height iq-welcome" style="background: url(assets/images/layouts/mydrive/background.png) no-repeat scroll right center; background-color: #ffffff; background-size: contain;">
                        <div class="card-body property2-content">
                            <div class="d-flex flex-wrap align-items-center">
                                <div class="col-lg-6 col-sm-6 p-0">
                                    <h5 class="mb-3">欢迎~ <a href="page-user.html" style="color: #8f92f6" id="name"></a></h5>
                                    <p class="mb-5" id="message"></p>
                                    <a href="page-message.html">查看发现<i class="las la-arrow-right ml-2"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card card-block card-stretch card-height">
                        <div class="card-header d-flex justify-content-between">
                            <div class="header-title">
                                <h4 class="card-title">快速访问</h4>
                            </div>
                        </div>
                        <div class="card-body">
                            <ul class="list-inline p-0 mb-0 row align-items-center">
                                <li class="col-lg-6 col-sm-6 mb-3 mb-sm-0">
                                    <a href="page-picture.html">
                                        <div data-load-file="file" data-load-target="#resolte-contaniner" data-url="assets/vendor/doc-viewer/files/demo.pdf" data-toggle="modal" data-target="#exampleModal" data-title="Product-planning.pdf" style="cursor: pointer;" class="p-2 text-center border rounded">
                                            <div>
                                                <img src="assets/images/layouts/mydrive/folder-1.png" class="img-fluid mb-1" alt="image1">
                                            </div>
                                            <p class="mb-0">图片</p>
                                        </div>
                                    </a>
                                </li>
                                <li class="col-lg-6 col-sm-6">
                                    <a href="page-video.html">
                                        <div data-load-file="file" data-load-target="#resolte-contaniner" data-url="assets/vendor/doc-viewer/files/demo.docx" data-toggle="modal" data-target="#exampleModal" data-title="Wireframe.docx" style="cursor: pointer;" class="p-2 text-center border rounded">
                                            <div>
                                                <img src="assets/images/layouts/mydrive/folder-2.png" class="img-fluid mb-1" alt="image2">
                                            </div>
                                            <p class="mb-0">视频</p>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>                             
                <div class="col-lg-12">
                    <div class="card card-block card-stretch card-transparent ">
                        <div class="card-header d-flex justify-content-between pb-0">
                            <div class="header-title">
                                <h4 class="card-title">文档类型</h4>
                            </div>
                            <div class="card-header-toolbar d-flex align-items-center">
                                <a href="page-document.html" class=" view-more">查看所有</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="card card-block card-stretch card-height">
                        <div class="card-body image-thumb">
                            <a href="page-document.html?documentType=pdf">
                                <div class="mb-4 text-center p-3 rounded iq-thumb">
                                    <div class="iq-image-overlay"></div>
                                    <img src="assets/images/layouts/page-1/pdf.png" class="img-fluid" alt="image1">       
                                </div>
                                <h6>PDF文件</h6>
                            </a>             
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="card card-block card-stretch card-height">
                        <div class="card-body image-thumb">
                            <a href="page-document.html?documentType=doc">
                                <div class="mb-4 text-center p-3 rounded iq-thumb">
                                    <div class="iq-image-overlay"></div>
                                    <img src="assets/images/layouts/page-1/doc.png" class="img-fluid" alt="image1">
                                </div>
                                <h6>DOC文件</h6>
                            </a>   
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="card card-block card-stretch card-height">
                        <div class="card-body image-thumb">
                            <a href="page-document.html?documentType=xls">
                                <div class="mb-4 text-center p-3 rounded iq-thumb">
                                    <div class="iq-image-overlay"></div>
                                    <img src="assets/images/layouts/page-1/xlsx.png" class="img-fluid" alt="image1">
                                </div>
                                <h6>XLS文件</h6>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="card card-block card-stretch card-height">
                        <div class="card-body image-thumb doc-text">
                            <a href="page-document.html?documentType=ppt">
                                <div class="mb-4 text-center p-3 rounded iq-thumb">
                                    <div class="iq-image-overlay"></div>
                                    <img src="assets/images/layouts/page-1/ppt.png" class="img-fluid" alt="image1">
                                </div>
                                <h6>PPT文件</h6>
                            </a>       
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="card card-block card-stretch card-transparent">
                        <div class="card-header d-flex justify-content-between pb-0">
                            <div class="header-title">
                                <h4 class="card-title">空间详情</h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-6 col-lg-3">
                    <div class="card card-block card-stretch card-height">
                        <div class="card-body">                            
                                <div class="d-flex justify-content-between">
                                    <a class="folder">
                                        <div class="icon-small bg-danger rounded mb-4">
                                            <i class="ri-file-copy-line"></i>
                                        </div>
                                    </a>
                                    <div class="card-header-toolbar">
                                        <div class="dropdown">
                                            <span class="dropdown-toggle" id="dropdownMenuButton2" data-toggle="dropdown">
                                                <i class="ri-more-2-fill"></i>
                                            </span>
                                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton2">
                                                <a class="dropdown-item" href="page-picture.html"><i class="ri-eye-fill mr-2"></i>查看图片</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <a class="folder" id="picture">

                                </a>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-6 col-lg-3">
                    <div class="card card-block card-stretch card-height">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <a class="folder">
                                    <div class="icon-small bg-primary rounded mb-4">
                                        <i class="ri-file-copy-line"></i>
                                    </div>
                                </a>
                                <div class="card-header-toolbar">
                                    <div class="dropdown">
                                        <span class="dropdown-toggle" id="dropdownMenuButton3" data-toggle="dropdown">
                                            <i class="ri-more-2-fill"></i>
                                        </span>
                                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton3">
                                            <a class="dropdown-item" href="page-document.html"><i class="ri-eye-fill mr-2"></i>查看文档</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <a class="folder" id="document">

                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-6 col-lg-3">
                    <div class="card card-block card-stretch card-height">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <a class="folder">
                                    <div class="icon-small bg-info rounded mb-4">
                                        <i class="ri-file-copy-line"></i>
                                    </div>
                                </a>
                                <div class="card-header-toolbar">
                                    <div class="dropdown">
                                        <span class="dropdown-toggle" id="dropdownMenuButton4" data-toggle="dropdown">
                                            <i class="ri-more-2-fill"></i>
                                        </span>
                                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton4">
                                            <a class="dropdown-item" href="page-audio.html"><i class="ri-eye-fill mr-2"></i>查看音频</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <a class="folder" id="audio">

                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-6 col-lg-3">
                    <div class="card card-block card-stretch card-height">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <a class="folder">
                                    <div class="icon-small bg-success rounded mb-4">
                                        <i class="ri-file-copy-line"></i>
                                    </div>
                                </a>
                                <div class="card-header-toolbar">
                                    <div class="dropdown">
                                        <span class="dropdown-toggle" id="dropdownMenuButton5" data-toggle="dropdown">
                                            <i class="ri-more-2-fill"></i>
                                        </span>
                                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton5">
                                            <a class="dropdown-item" href="page-video.html"><i class="ri-eye-fill mr-2"></i>查看视频</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <a class="folder" id="video">

                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-8 col-xl-8"> 
                    <div class="card card-block card-stretch card-height files-table">                   
                        <div class="card-header d-flex justify-content-between">
                            <div class="header-title">
                                <h4 class="card-title">实时记录</h4>
                            </div>
                            <div class="card-header-toolbar d-flex align-items-center">
                                <a href="page-record.html" class="view-more">查看全部</a>
                            </div>
                        </div>
                        <div class="card-body pt-0">
                            <div class="table-responsive">
                                <table class="table mb-0 table-borderless tbl-server-info">
                                <thead>
                                    <tr>
                                        <th scope="col">文件名称</th>
                                        <th scope="col">操作类型</th>
                                        <th scope="col">操作时间</th>
                                        <th scope="col">文件大小</th>
                                    </tr>
                                </thead>
                                <tbody id="record">





                                </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card card-block card-stretch card-height ">
                        <div class="card-header d-flex justify-content-between">
                            <div class="header-title">
                                <h4 class="card-title">实时连接</h4>
                            </div>
                        </div>
                        <div class="card-body">
                            <div id="layout-1-chart" style="min-height: 220px;"></div>
                            <div class="row mt-4">
                                <div class="col-lg-6 col-md-6 col-6">
                                    <div class="media align-items-center">
                                        <div class="icon iq-icon-box bg-primary rounded icon-statistic">
                                            <i class="las la-long-arrow-alt-down"></i>
                                        </div>
                                        <div class="media-body ml-3">
                                            <p class="mb-0">下载</p>
                                            <h5 id="download"></h5>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-6">
                                    <div class="media align-items-center">
                                        <div class="icon iq-icon-box bg-light rounded icon-statistic">
                                            <i class="las la-long-arrow-alt-up"></i>
                                        </div>
                                        <div class="media-body ml-3">
                                            <p class="mb-0">上传</p>
                                            <h5 id="upload"></h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card card-block card-stretch card-height  plan-bg">
                        <div class="card-body">
                            <h4 class="mb-3 text-white">解锁云盘会员</h4>
                            <p>扩展存储、访问<br> Cloud BOX云盘的更多功能</p>
                            <div class="row align-items-center justify-content-between">
                               <div class="col-6 go-white ">
                                <a href="page-price.html" class="btn d-inline-block mt-5">去 解锁</a>
                               </div>
                                <div class="col-6">
                                    <img src="assets/images/layouts/mydrive/lock-bg.png" class="img-fluid" alt="image1">
                                </div>
                            </div>                     
                        </div>
                    </div>
                </div>
                <div class="col-lg-8">
                    <div class="card card-block card-stretch card-height">
                        <div class="card-header d-flex justify-content-between pb-0">
                            <div class="header-title">
                                <h4 class="card-title">操作次数统计</h4>
                            </div>
                            <div class="card-header-toolbar d-flex align-items-center">
                                <div class="dropdown">
                                    <span class="dropdown-toggle btn  dropdown-bg border border-primary text-primary rounded" id="dropdownMenuButton11"
                                        data-toggle="dropdown">
                                        近7日<i class="ri-arrow-down-s-line"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="card-body pt-0">
                            <div id="layout-1-chart2"></div>                
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
    <!-- Wrapper 结束-->

    <!-- 页脚开始 -->
    <footer class="iq-footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6">
                    <ul class="list-inline mb-0">
                        <li class="list-inline-item"><a href="page-index.html">© www.gaoyiguan.cn - </a></li>
                        <li class="list-inline-item"><a href="page-index.html">网上云盘-毕设项目-高以官 © 版权所有</a></li>
                    </ul>
                </div>
                <div class="col-lg-6 text-right">
                    Copyright 2021 <a href="page-index.html">Cloud BOX</a> All Rights Reserved.
                </div>
            </div>
        </div>
    </footer>
    <!-- 页脚结束 -->
    <script src="assets/js/jquery-1.8.3.min.js"></script>
    <script src="assets/js/backend-bundle.min.js"></script>
    <script src="assets/js/customizer.js"></script>
    <script src="assets/js/chart-custom.js"></script>
    <script src="assets/vendor/doc-viewer/include/pdf/pdf.js"></script>
    <script src="assets/vendor/doc-viewer/include/docx/jszip-utils.js"></script>
    <script src="assets/vendor/doc-viewer/include/docx/mammoth.browser.min.js"></script>
    <script src="assets/vendor/doc-viewer/include/PPTXjs/js/filereader.js"></script>
    <script src="assets/vendor/doc-viewer/include/PPTXjs/js/d3.min.js"></script>
    <script src="assets/vendor/doc-viewer/include/PPTXjs/js/nv.d3.min.js"></script>
    <script src="assets/vendor/doc-viewer/include/PPTXjs/js/pptxjs.js"></script>
    <script src="assets/vendor/doc-viewer/include/PPTXjs/js/divs2slides.js"></script>
    <script src="assets/vendor/doc-viewer/include/SheetJS/handsontable.full.min.js"></script>
    <script src="assets/vendor/doc-viewer/include/SheetJS/xlsx.full.min.js"></script>
    <script src="assets/vendor/doc-viewer/include/verySimpleImageViewer/js/jquery.verySimpleImageViewer.js"></script>
    <script src="assets/vendor/doc-viewer/include/officeToHtml/officeToHtml.js"></script>
    <script src="assets/js/doc-viewer.js"></script>
    <script src="assets/js/app.js"></script>
    <script src="assets/vendor/notice/js/bs4.pop.js"></script>
    <script src="assets/vendor/notice/bootstrap-4.0.0-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript">

        //首页欢迎语
        welcome();

        //消息数量
        message();

        //云盘容量信息
        spaceInfo();

        //空间详情
        cloudInfo();

        //实时操作记录
        recentRecord();

        //实时网速
        randomNum();

        //操作统计图表
        optionCount();


        /**
         * 首页欢迎语
         */
        function welcome() {
            $.ajax({
                url: 'cloud-user/welcome',
                type: 'get',
                dataType: 'json',
                success:function (result) {
                    if (result.code == 200) {
                        let user = result.data;
                        $("#name").html(user.name)
                        $("#username").html(user.name);
                        $("#head1").prop("src", user.picPath);
                        $("#head2").prop("src", user.picPath);
                    }
                }
            });
        };


        /**
         * 消息数量
         */
        function message() {
            $.ajax({
                url: 'cloud-message/count',
                type: 'get',
                dataType: 'json',
                success:function (result) {
                    if (result.code == 200) {
                        $("#message").html("您共有"+ result.data +"个精选发现，等待您的查看，快去看看吧~");
                    }
                }
            });
        }


        /**
         * 退出登录
         */
        $("#exit").click(function () {
            bs4pop.confirm('你确定要退出登录吗？', function(sure){
                if (sure == false) return;

                $.ajax({
                    url: 'cloud-user/exit',
                    type: 'delete',
                    dataType: 'json',
                    success: function (result) {
                        if (result.code == 200) {
                            location.href = 'auth-sign-in.html';
                        }
                    }
                });
            });
        });

        /**
         * 云盘容量信息
         */
        function spaceInfo() {
            $.ajax({
                url: 'cloud-space/info',
                type: 'get',
                dataType: 'json',
                success: function (result) {
                    if (result.code == 200) {
                        var data = result.data;
                        var percent = data.percent;
                        $("#space").before("");
                        var str = "<div class=\"sidebar-bottom\">\n" +
                            "         <h4 class=\"mb-3\"><i class=\"las la-cloud mr-2\"></i>网上云盘</h4>\n" +
                            "         <p>"+ data.usedSize +" / "+ data.totalSize +" 容量</p>\n" +
                            "         <div class='progress'>" +
                            "            <div class='progress-bar progress-bar-striped' role='progressbar' style='width: "+ percent +"%;' aria-valuenow='"+ percent +"' aria-valuemin='0' aria-valuemax='100'></div>"+
                            "         </div>" +
                            "         <p style='margin-top: 10px'>"+ percent +"% - "+ data.surplusSize +" 剩余</p>\n" + "</div>";
                        $("#space").before(str);

                    }
                }
            });
        };

        /**
         * 空间详情
         */
        function cloudInfo() {
            $.ajax({
                url: 'cloud-picture/info',
                type: 'get',
                dataType: 'json',
                success: function (result) {
                    if (result.code == 200) {
                        let item = result.data;
                        $("#picture").html("<h5 class=\"mb-2\">图片</h5>\n" +
                            "                                    <p class=\"mb-2\"><i class=\"lar la-clock text-danger mr-2 font-size-20\"></i> "+ item.date +"</p>\n" +
                            "                                    <p class=\"mb-0\"><i class=\"las la-file-alt text-danger mr-2 font-size-20\"></i> "+ item.count +" 个图片</p>");
                    }
                }
            });
            $.ajax({
                url: 'cloud-document/info',
                type: 'get',
                dataType: 'json',
                success: function (result) {
                    if (result.code == 200) {
                        let item = result.data;
                        $("#document").html("<h5 class=\"mb-2\">文档</h5>\n" +
                            "                                <p class=\"mb-2\"><i class=\"lar la-clock text-primary mr-2 font-size-20\"></i> "+ item.date +"</p>\n" +
                            "                                <p class=\"mb-0\"><i class=\"las la-file-alt text-primary mr-2 font-size-20\"></i> "+ item.count +" 个文档</p>");
                    }
                }
            });
            $.ajax({
                url: 'cloud-audio/info',
                type: 'get',
                dataType: 'json',
                success: function (result) {
                    if (result.code == 200) {
                        let item = result.data;
                        $("#audio").html("<h5 class=\"mb-2\">音频</h5>\n" +
                            "                                <p class=\"mb-2\"><i class=\"lar la-clock text-info mr-2 font-size-20\"></i> "+ item.date +"</p>\n" +
                            "                                <p class=\"mb-0\"><i class=\"las la-file-alt text-info mr-2 font-size-20\"></i> "+ item.count +" 个音频</p>");
                    }
                }
            });
            $.ajax({
                url: 'cloud-video/info',
                type: 'get',
                dataType: 'json',
                success: function (result) {
                    if (result.code == 200) {
                        let item = result.data;
                        $("#video").html("<h5 class=\"mb-2\">视频</h5>\n" +
                            "                                <p class=\"mb-2\"><i class=\"lar la-clock text-success mr-2 font-size-20\"></i> "+ item.date +"</p>\n" +
                            "                                <p class=\"mb-0\"><i class=\"las la-file-alt text-success mr-2 font-size-20\"></i> "+ item.count +" 个视频</p>");
                    }
                }
            });
        };

        /**
         * 实时操作记录
         */
        function recentRecord() {
            $.ajax({
                url: 'cloud-record/recent',
                type: 'get',
                dataType: 'json',
                success: function (result) {
                    if (result.code == 200) {
                        $("#record").html("");

                        let list = result.data;

                        if (list == null || list.length == 0) {
                            appendNoData();
                            return;
                        }

                        for (let i = 0; i < list.length; i++) {
                            let item = list[i];
                            if (item.fileOperate == '上传') {
                                appendRecentRecordUpload(item);
                            }else if (item.fileOperate == '下载') {
                                appendRecentRecordDownload(item);
                            }
                        }
                    }
                }
            });
        };

        /**
         * 拼接上传实时操作记录
         */
        function appendRecentRecordUpload(item) {
            $("#record").append("<tr>\n" +
                "                                        <td>\n" +
                "                                            <div class=\"d-flex align-items-center\">\n" +
                "                                                    <div class=\"mr-3\">\n" +
                "                                                        <a>\n" +
                "                                                            <img src=\""+ item.fileImg +"\" class=\"img-fluid avatar-30\">\n" +
                "                                                        </a>\n" +
                "                                                    </div>\n" +
                "                                                    <span>"+ item.fileName +"</span>\n" +
                "                                            </div>\n" +
                "                                        </td>\n" +
                "                                        <td>" +
                "                                               <div class=\"icon-small bg-danger rounded mr-3\">\n" +
                "                                                    <i class=\"ri-file-upload-line\"></i>\n" +
                "                                                </div>" +
                "                                        </td>\n" +
                "                                        <td>"+ item.fileTime +"</td>\n" +
                "                                        <td>"+ item.fileSize +"</td>\n" +
                "                                    </tr>");
        };

        /**
         * 拼接下载实时操作记录
         */
        function appendRecentRecordDownload(item) {
            $("#record").append("<tr class=\"\">\n" +
                "                                        <td>\n" +
                "                                            <div class=\"d-flex align-items-center\">\n" +
                "                                                    <div class=\"mr-3\">\n" +
                "                                                        <a>\n" +
                "                                                            <img src=\""+ item.fileImg +"\" class=\"img-fluid avatar-30\">\n" +
                "                                                        </a>\n" +
                "                                                    </div>\n" +
                "                                                    <span>"+ item.fileName +"</span>\n" +
                "                                            </div>\n" +
                "                                        </td>\n" +
                "                                        <td>" +
                "                                               <div class=\"icon-small bg-primary rounded mr-3\">\n" +
                "                                                    <i class=\"ri-file-download-line\"></i>\n" +
                "                                                </div>" +
                "                                        </td>\n" +
                "                                        <td>"+ item.fileTime +"</td>\n" +
                "                                        <td>"+ item.fileSize +"</td>\n" +
                "                                    </tr>");
        };


        /**
         * 空结果展示页面
         */
        function appendNoData() {
            $("#record").append("<tr><td colspan='4'><div style=\"margin:0 auto\">\n" +
                "                        <img src=\"assets/images/search2.gif\" width=\"320px\">\n" +
                "                    </div></td></tr>");
        };


        /**
         * 操作统计图表
         */
        function optionCount() {

            $.ajax({
                url: 'cloud-record/seven',
                type: 'get',
                dataType: 'json',
                success:function (result) {
                    if (result.code == 200) {
                        var xaXis = result.data.xaXis;
                        var yaXis = result.data.yaXis;

                        if (jQuery("#layout-1-chart2").length) {
                            var options = {
                                series: [{
                                    name: "次数",
                                    data: yaXis
                                }],
                                colors: ["#8f93f6"],
                                chart: {
                                    toolbar: {
                                        show: false
                                    },
                                    height: 225,
                                    type: 'line',
                                    zoom: {
                                        enabled: false
                                    }
                                },
                                dataLabels: {
                                    enabled: false
                                },
                                stroke: {
                                    curve: 'straight'
                                },
                                title: {
                                    text: '',
                                    align: 'left'
                                },
                                grid: {
                                    row: {
                                        colors: ['#f3f3f3', 'transparent'],
                                        opacity: 0.5
                                    },
                                },
                                xaxis: {
                                    categories: xaXis,
                                    labels: {
                                        minHeight: 20,
                                        maxHeight: 20
                                    }
                                },
                                yaxis: {
                                    show: true,
                                    labels: {
                                        minWidth: 15,
                                        maxWidth: 15
                                    }
                                }
                            };
                            if(typeof ApexCharts !== typeof undefined){
                                var chart = new ApexCharts(document.querySelector("#layout-1-chart2"), options);
                                chart.render();
                                const body = document.querySelector('body')
                                if (body.classList.contains('dark')) {
                                    apexChartUpdate(chart, {
                                        dark: true
                                    })
                                }

                                document.addEventListener('ChangeColorMode', function (e) {
                                    apexChartUpdate(chart, e.detail)
                                })
                            }
                        }
                    }
                }
            });
        };

        /**
         * 实时网速
         */
        function randomNum() {
            setInterval(function () {
                $("#download").html("");
                $("#upload").html("");
                let download = Math.round(Math.random()*5000 + 10000);
                let upload = Math.round(Math.random()*1000 + 1000);
                $("#download").append(download);
                $("#upload").append(upload);
            }, 1000);
        };


    </script>

  </body>
</html>